<template>
	<div id="login">
		<div class="div" id="div"></div>
		<div class="form">
			<div class="logo">
				<img src="../../assets/img/boyellLogo.png" alt="">
			</div>
			<form action="">
				  <el-input placeholder="请输入账户" v-model="username" type="text" clearable>
						<template slot="prepend">账户:</template>
					</el-input>
					<el-input placeholder="请输入密码" v-model="password" type="password" clearable>
						<template slot="prepend">密码:</template>
					</el-input>
				<div class="ivu-form-item">
					<el-button @click="login" size="medium">登陆</el-button>
					
				</div>
			</form>
		</div>
	</div>
</template>
<script>

export default {
	
	data(){
		return{
			username:'',
			password:'',
		}
	},
	computed:{
		// ...mapGetters({
		// 	'login':1
		// })
	},
	mounted:function(){
		// 15372323871
		// bycx789
	},
	methods:{
		login:function(){
			let data = {}
			
			data.username = this.username;
			data.password = this.password;
			let url = 'index/login';
			this.$axios.getAddressJson(url,data)
			.then(res=> {
				if(res.data.code==1){
					// console.log(res)
					// data.push({'login':1})
					this.$router.push({path:"/"})
					sessionStorage .setItem('USER_INFO',JSON.stringify(data))
					
				}else{
					if(this.username === '' || this.password === ''){
						this.$layer.msg('账户或者密码不能为空！')
					}else{
						this.$layer.msg(res.data.message)
					}
				}
			})
			.catch(res=>{
				console.log(res)
			})
			
		}
	},
	watch:{
		
	}
}




	var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
	var container, stats;
	var camera, scene, renderer;
	var particles, particle, count = 0;
	var mouseX = 0, mouseY = 0;
	var windowHalfX = window.innerWidth / 2;
	var windowHalfY = window.innerHeight / 2;
	init();
	animate();

	function init() {
		container = document.createElement( 'div' );
		document.body.appendChild( container );
		camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
		camera.position.z = 1000;
		scene = new THREE.Scene();
		particles = new Array();
		var PI2 = Math.PI * 2;
		var material = new THREE.SpriteCanvasMaterial( {
			color: 0xff0080,//小圆点颜色
			program: function ( context ) {
				context.beginPath();
				context.arc( 0, 0, 0.5, 0, PI2, true );
				context.fill();
			}
		} );
		
		var i = 0;
		for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
			for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
				particle = particles[ i ++ ] = new THREE.Sprite( material );
				particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
				particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
				scene.add( particle );
			}
		}
		renderer = new THREE.CanvasRenderer();
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setSize( window.innerWidth, window.innerHeight );
		container.appendChild( renderer.domElement );
		stats = new Stats();
		// container.appendChild( stats.dom );
		document.addEventListener( 'mousemove', onDocumentMouseMove, false );
		document.addEventListener( 'touchstart', onDocumentTouchStart, false );
		document.addEventListener( 'touchmove', onDocumentTouchMove, false );
		//



		window.addEventListener( 'resize', onWindowResize, false );
		renderer.setClearColor('rgb(0,0,0)',0.5);//更改背景颜色
	}
	function onWindowResize() {
		windowHalfX = window.innerWidth / 2;
		windowHalfY = window.innerHeight / 2;
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize( window.innerWidth, window.innerHeight );
	}
	//
	function onDocumentMouseMove( event ) {
		mouseX = event.clientX - windowHalfX;
		mouseY = event.clientY - windowHalfY;
	}
	function onDocumentTouchStart( event ) {
		if ( event.touches.length === 1 ) {
			event.preventDefault();
			mouseX = event.touches[ 0 ].pageX - windowHalfX;
			mouseY = event.touches[ 0 ].pageY - windowHalfY;
		}
	}
	function onDocumentTouchMove( event ) {
		if ( event.touches.length === 1 ) {
			event.preventDefault();
			mouseX = event.touches[ 0 ].pageX - windowHalfX;
			mouseY = event.touches[ 0 ].pageY - windowHalfY;
		}
	}
	//
	function animate() {
		requestAnimationFrame( animate );
		render();
		stats.update();
	}
	function render() {
		camera.position.x += ( mouseX - camera.position.x ) * .05;
		camera.position.y += ( - mouseY - camera.position.y ) * .05;
		camera.lookAt( scene.position );
		var i = 0;
		for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
			for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
				particle = particles[ i++ ];
				particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
					( Math.sin( ( iy + count ) * 0.5 ) * 50 );
				particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 4 +
					( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 4;
			}
		}
		renderer.render( scene, camera );
		count += 0.1;
	}

</script>
<style>
	body{
		overflow: hidden;
	}
	input{border:none;}
	.form{
		position: absolute;
		left: 0;
		right: 0;
		width: 400px;
		padding: 35px 35px 15px 35px;
		margin: 120px auto;
	}
	.form form{
		display: flex;
		flex-direction: column;
		padding: 10px;
		box-sizing: border-box;
	}
	.form form .el-input{
		margin-bottom: 24px;
		zoom: 1;
		color: #333;
	}
	.form form .el-button--medium{width: 100%;}
</style>
